<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 当我们使用插值表达式时，首先会从data里面去找，如果找不到，就会去计算属性computed里面去找 -->
        <!-- 可以把计算属性理解为和data里面一样的数据类型，只不过他的形式是类似方法function的 -->
        {{fullName}}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Dell',
                lastName: 'Lee'
            },
            computed: {
                // fullName: function () {
                //      return this.firstName + this.lastName
                // }

                fullName: {
                    // 使用get、set
                    //  当取fullName时，get方法被执行
                    get: function () {
                        return this.firstName + this.lastName
                    },
                    // 当设置fullName的值时，set方法被执行
                    set: function (value) {
                        var arr = value.split(" ")
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>

</html>